import { FC, useEffect } from 'react'
import { QuestionInfoProps } from './types'
import { Form, Input } from 'antd'
import TextArea from 'antd/es/input/TextArea'

const Prop: FC<QuestionInfoProps> = props => {
  const { title, desc, onChange, disabled } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({ title, desc })
  }, [title, desc])

  function handleValuesChange() {
    if (onChange) onChange(form.getFieldsValue())
  }

  return (
    <Form
      layout="vertical"
      initialValues={{ title, desc }}
      form={form}
      onValuesChange={handleValuesChange}
      disabled={disabled}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入问卷标题' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="描述" name="desc">
        <TextArea rows={10} />
      </Form.Item>
    </Form>
  )
}

export default Prop
